<template>
	<view>
		<!-- <cmd-nav-bar back title="信息设置"></cmd-nav-bar> -->
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view>
					<cmd-cel-item title="头像" slot-right>
						<cmd-avatar src="/static/boylogo.png"></cmd-avatar>
					</cmd-cel-item>
					<cmd-cel-item title="账号" :addon="userinfo.username"></cmd-cel-item>
					<cmd-cel-item title="昵称" :addon="userinfo.nickName"></cmd-cel-item>
					<cmd-cel-item title="姓名" :addon="userinfo.realName"></cmd-cel-item>
					<cmd-cel-item title="联系方式" :addon="userinfo.phone"></cmd-cel-item>
					<cmd-cel-item title="邮箱" :addon="userinfo.email"></cmd-cel-item>
					<cmd-cel-item title="修改密码" @click="fnClick('modify')" arrow></cmd-cel-item>
					<!-- <button class="btn-logout" @click="logout()">退出登录</button> -->
					<button class=" btn-logout" @click="dialogToggle('warn')"><text
							class="button-text warn-text">退出登录</text></button>
				</view>
			</cmd-transition>
		</cmd-page-body>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="提示" content="确认要退出当前账号吗？"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import cmdNavBar from '@/components/cmd-nav-bar/cmd-nav-bar.vue';
	import cmdPageBody from '@/components/cmd-page-body/cmd-page-body.vue';
	import cmdTransition from '@/components/cmd-transition/cmd-transition.vue';
	import cmdCelItem from '@/components/cmd-cell-item/cmd-cell-item.vue';
	import cmdAvatar from '@/components/cmd-avatar/cmd-avatar.vue';

	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdCelItem,
			cmdAvatar
		},

		data() {
			return {
				userinfo: {
					username: '',
					nickName: '',
					realName: '',
					phone: '',
					email: ''
				},
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: ''
			};
		},
		onShow(object) {
			let _this = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					// console.log(res)
					// console.log('获取成功',JSON.stringify(res));
					var userInfomsg = JSON.parse(JSON.stringify(res.data));
					console.log(userInfomsg);
					_this.userinfo.username = userInfomsg.username;
					_this.userinfo.nickName = userInfomsg.nickName;
					_this.userinfo.realName = userInfomsg.realName;
					_this.userinfo.phone = userInfomsg.phone;
					_this.userinfo.email = userInfomsg.email;
					console.log(_this.userinfo);
				}
			});
		},
		mounted() {},
		methods: {
			/**
			 * 点击触发
			 * @param {Object} type 跳转页面名或者类型方式
			 */
			fnClick(type) {
				if (type == 'modify') {
					uni.navigateTo({
						url: '/pages/user/modify/modify'
					});
				}
			},
			//退出登录弹窗提示
			dialogToggle(type) {
				this.msgType = type;
				this.$refs.alertDialog.open();
			},
			dialogConfirm() {
				console.log('点击确认');
				//清除本地用户信息和缓存
				uni.setStorageSync('authorization', '');
				uni.setStorageSync('userInfo', '');
				uni.reLaunch({
					// uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			dialogClose() {
				console.log('点击关闭');
			},
			/**
			 * 点击触发
			 * @param {none} none  用户退出登录，清除信息 返回登陆界面
			 */
			logout() {
				if (type == 'modify') {
					uni.navigateTo({
						url: '/pages/user/modify/modify'
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.btn-logout {
		margin-top: 100upx;
		width: 80%;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #00aa00, #00ff00);
	}

	.btn-logout-hover {
		background: linear-gradient(to right, #00aa00, #00ff00);
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 16px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #ffffff;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>
